<template>
  <a-layout-header class="header">
    <div class="logo">
      <img src="../assets/logo.svg" alt="牙之初" />
      <span>口腔诊疗平台</span>
    </div>
    <div class="header-menu">
      <a-menu
        mode="horizontal"
        :selectedKeys="[activeKey]"
        theme="light"
      >
        <a-menu-item key="dashboard" @click="navigateTo('/dashboard')">工作台</a-menu-item>
        <a-menu-item key="cases" @click="navigateTo('/cases')">病例</a-menu-item>
        <a-menu-item key="appointments" @click="navigateTo('/appointments')">预约</a-menu-item>
        <a-menu-item key="reports" @click="navigateTo('/reports')">报告</a-menu-item>
        <a-menu-item v-if="isSuperiorAccount" key="document-review" @click="navigateTo('/document-review')">资料审核</a-menu-item>
      </a-menu>
    </div>
    <div class="header-right">
      <a-dropdown>
        <a class="user-dropdown" @click.prevent>
          <a-avatar style="background-color: #1890ff">
            <template #icon><UserOutlined /></template>
          </a-avatar>
          <span class="username">{{ username || '医生' }}</span>
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item key="settings" @click="navigateTo('/settings')">个人设置</a-menu-item>
            <a-menu-divider />
            <a-menu-item key="logout" @click="logout">退出登录</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </a-layout-header>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import { useRouter } from 'vue-router';
import { UserOutlined } from '@ant-design/icons-vue';

const props = defineProps({
  activeKey: {
    type: String,
    default: 'dashboard'
  },
  username: {
    type: String,
    default: ''
  },
  isSuperiorAccount: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['logout']);
const router = useRouter();

const navigateTo = (path) => {
  router.push(path);
};

const logout = () => {
  emit('logout');
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 64px;
  line-height: 64px;
  position: fixed;
  width: 100%;
  z-index: 10;
  top: 0;
  left: 0;
}

.logo {
  display: flex;
  align-items: center;
  margin-right: 30px;
}

.logo img {
  height: 32px;
  margin-right: 8px;
}

.logo span {
  font-size: 18px;
  font-weight: bold;
  color: #1890ff;
}

.header-menu {
  flex: 1;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.username {
  margin-left: 8px;
  color: rgba(0, 0, 0, 0.65);
}

:deep(.ant-menu-horizontal) {
  border-bottom: none;
}
</style>
